<template>
  <div class="personal-recommend-container">
    <h1>个性推荐</h1>
    
    <div class="recommend-filters">
      <div class="filter-item">
        <label>订单记录</label>
        <button @click="filterType = 'order'" :class="{ active: filterType === 'order' }">筛选</button>
      </div>
      <div class="filter-item">
        <label>浏览记录</label>
        <button @click="filterType = 'browse'" :class="{ active: filterType === 'browse' }">筛选</button>
      </div>
      <div class="filter-item">
        <label>收藏记录</label>
        <button @click="filterType = 'favorite'" :class="{ active: filterType === 'favorite' }">筛选</button>
      </div>
      <div class="filter-item">
        <label>购物车记录</label>
        <button @click="filterType = 'cart'" :class="{ active: filterType === 'cart' }">筛选</button>
      </div>
      <div class="filter-item">
        <label>综合推荐</label>
        <button @click="filterType = 'all'" :class="{ active: filterType === 'all' }">筛选</button>
      </div>
    </div>
    
    <div class="recommend-products">
      <div v-for="product in recommendedProducts" :key="product.code" class="product-card">
        <div class="product-image">
          <img src="/src/assets/img/image.png" :alt="product.name">
        </div>
        <div class="product-info">
          <h3>{{ product.name }}</h3>
          <p>{{ product.category }} | {{ product.attribute }}</p>
          <p class="product-price">¥{{ product.price }}</p>
          <p class="product-sales">月销量: {{ product.sales }}件</p>
        </div>
        <div class="product-actions">
          <button @click="addToFavorite(product)" class="action-button">收藏</button>
          <button @click="addToCart(product)" class="action-button">购买</button>
        </div>
      </div>
    </div>
    
    <div class="pagination" v-if="totalPages > 1">
      <button v-for="page in totalPages" :key="page" @click="goToPage(page)" :class="{ active: currentPage === page }">{{ page }}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PersonalRecommend',
  data() {
    return {
      filterType: 'all', // 默认为综合推荐
      allProducts: [
        { code: '001', name: '男士休闲衬衫', attribute: 'L码/蓝色', category: '服装', price: '129.00', sales: 2341 },
        { code: '002', name: '女士牛仔裤', attribute: 'M码/黑色', category: '服装', price: '199.50', sales: 1892 },
        { code: '003', name: '运动跑鞋', attribute: '42码/白色', category: '鞋类', price: '459.00', sales: 3102 },
        { code: '004', name: '棒球帽', attribute: '均码/红色', category: '配饰', price: '89.00', sales: 982 },
        { code: '005', name: '智能手表', attribute: '黑色/防水', category: '配饰', price: '899.00', sales: 1562 },
        { code: '006', name: '智能手机', attribute: '128GB/黑色', category: '电子', price: '3999.00', sales: 5231 },
        { code: '007', name: '轻薄笔记本', attribute: '16GB/512GB', category: '电子', price: '5999.00', sales: 1203 },
        { code: '008', name: '平板电脑', attribute: '64GB/银色', category: '电子', price: '2599.00', sales: 1876 },
        { code: '009', name: '无线耳机', attribute: '白色/降噪', category: '电子', price: '799.00', sales: 4521 },
        { code: '010', name: '4K智能电视', attribute: '55英寸', category: '家电', price: '3299.00', sales: 892 },
        { code: '011', name: '双门冰箱', attribute: '218L/银色', category: '家电', price: '2199.00', sales: 562 },
        { code: '012', name: '滚筒洗衣机', attribute: '8kg/变频', category: '家电', price: '2599.00', sales: 721 }
      ],
      currentPage: 1,
      itemsPerPage: 6
    };
  },
  computed: {
    // 根据筛选类型获取推荐产品
    filteredProducts() {
      // 实际应用中，这里应该根据不同的筛选类型从服务器获取数据
      // 这里简单模拟不同筛选条件下的产品列表
      switch(this.filterType) {
        case 'order':
          return this.allProducts.filter(p => ['001', '003', '005', '007', '009'].includes(p.code));
        case 'browse':
          return this.allProducts.filter(p => ['002', '004', '006', '008', '010'].includes(p.code));
        case 'favorite':
          return this.allProducts.filter(p => ['001', '002', '005', '008', '011'].includes(p.code));
        case 'cart':
          return this.allProducts.filter(p => ['003', '006', '009', '012'].includes(p.code));
        case 'all':
        default:
          // 综合推荐按销量排序
          return [...this.allProducts].sort((a, b) => b.sales - a.sales);
      }
    },
    // 分页后的推荐产品
    recommendedProducts() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.filteredProducts.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.filteredProducts.length / this.itemsPerPage);
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page;
    },
    addToFavorite(product) {
      // 获取现有收藏
      let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
      // 检查是否已收藏
      if (!favorites.some(item => item.code === product.code)) {
        favorites.push(product);
        localStorage.setItem('favorites', JSON.stringify(favorites));
        alert('已添加到收藏');
      } else {
        alert('该商品已在收藏中');
      }
    },
    addToCart(product) {
      // 获取现有购物车
      let cart = JSON.parse(localStorage.getItem('cart')) || [];
      // 检查是否已在购物车
      const existingItem = cart.find(item => item.code === product.code);
      if (existingItem) {
        existingItem.quantity = (existingItem.quantity || 1) + 1;
      } else {
        cart.push({...product, quantity: 1});
      }
      localStorage.setItem('cart', JSON.stringify(cart));
      alert('已添加到购物车');
    }
  }
}
</script>

<style scoped>
.personal-recommend-container {
  padding: 20px;
  text-align: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.recommend-filters {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

.filter-item label {
  margin-bottom: 5px;
  font-weight: bold;
}

.filter-item button {
  padding: 8px 15px;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.filter-item button.active {
  background-color: #4a90e2;
  color: white;
}

.recommend-products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex: 1;
  overflow-y: auto;
}

.product-card {
  width: 30%;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  height: 150px;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-sales {
  color: #888;
  font-size: 12px;
  margin: 2px 0;
}

.product-info {
  padding: 10px;
  text-align: left;
}

.product-info h3 {
  margin: 0 0 5px 0;
}

.product-price {
  font-weight: bold;
  color: #e53935;
  margin: 5px 0;
}

.product-actions {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #f5f5f5;
}

.action-button {
  padding: 5px 10px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.action-button:hover {
  background-color: #357ab8;
}

.pagination {
  margin-top: 20px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #4a90e2;
  color: white;
  border: none;
  cursor: pointer;
}

.pagination button.active {
  background-color: #357ab8;
  font-weight: bold;
}

.pagination button:hover {
  background-color: #357ab8;
}

@media (max-width: 1200px) {
  .product-card {
    width: 45%;
  }
}

@media (max-width: 768px) {
  .product-card {
    width: 90%;
  }
  
  .recommend-filters {
    flex-direction: column;
    align-items: center;
  }
  
  .filter-item {
    margin: 5px 0;
  }
}
</style>